<template>
  <div id="id">
    <Input v-model="value" placeholder="请输入姓名" style="width: 200px;margin-right:20px;" />
    <Button type="primary" @click="addUser" style="margin-right:20px;">添加</Button>
    <Button type="primary" @click="Search">搜索</Button>
    <Table border :loading="LoadingTable" :columns="columns7" :data="data6" style="margin-top:20px"></Table>
    <Modal v-model="modal1" :title="Title" :ok-text="OnText" @on-ok="Submission">
      <Form :model="formItem" :rules="ruleValidate" :loading="Loading" ref="formValidate" :label-width="100">
        <FormItem label="角色名字" prop="access">
          <Input v-model="formItem.access" placeholder="请输入角色名字"></Input>
        </FormItem>
        <FormItem label="角色描述" prop="name">
          <Input v-model="formItem.name" placeholder="请输入角色描述"></Input>
        </FormItem>
      </Form>
    </Modal>
    <Page :total="Total" v-if="isShow" @on-change="OnChange" style="margin-top:20px;"></Page>
  </div>
</template>
<script>
import { addRole, QueryRole, deleteRole, updateRole } from '@/api/admin/Role'
export default {
  data () {
    return {
      value: '',
      modal1: false,
      formItem: {},
      Title: '添加角色',
      OnText: '添加',
      Loading: false,
      isShow: false,
      LoadingTable: false,
      addStatus: false,
      updateId: '',
      Total: 100,
      ruleValidate: {
        name: [{ required: true, message: '请输入描述信息', trigger: 'blur' }],
        access: [
          {
            required: true,
            message: '请输入角色',
            trigger: 'blur'
          }
        ]
      },
      columns7: [
        {
          title: '名称',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.name)
            ])
          }
        },
        {
          title: '角色',
          key: 'access'
        },
        {
          title: '创建时间',
          key: 'createdAt'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data6: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park'
        }
      ]
    }
  },
  methods: {
    Search () {
      this.getPageData(1, 10, 1, this.value).then(res => {
        this.$Message.success('搜索成功')
        this.data6 = res.data.list
      })
    },
    show (val) {
      this.modal1 = true
      this.Title = '编辑'
      this.OnText = '编辑'
      this.addStatus = false
      this.formItem.access = val.row.access
      this.formItem.name = val.row.name
      this.updateId = val.row._id
    },
    remove (val) {
      this.$Modal.confirm({
        title: '是否删除',
        // content: "<p>Content of dialog</p><p>Content of dialog</p>",
        onOk: () => {
          deleteRole(val.row._id).then(res => {
            this.$Message.info('删除成功')
            this.getPageData(1, 10, 1).then(response => {
              this.data6 = response.data.list
            })
          })
        },
        onCancel: () => {
          this.$Message.info('取消')
        }
      })
    },
    addUser () {
      this.modal1 = true
      this.Title = '添加角色'
      this.OnText = '添加'
      this.$refs['formValidate'].resetFields()
      this.addStatus = true
    },
    Submission () {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          if (this.addStatus) {
            // 添加
            this.Loading = true
            addRole(this.formItem.name, this.formItem.access).then(res => {
              this.$Message.success('添加成功')
              this.Loading = false
              this.getPageData(1, 10, 1).then(response => {
                this.data6 = response.data.list
              })
            })
          } else {
            // 编辑
            updateRole(
              this.updateId,
              this.formItem.access,
              this.formItem.name
            ).then(res => {
              if (res.data.code === 0) {
                this.$Message.success('修改成功')
                this.getPageData(1, 10, 1).then(response => {
                  this.data6 = response.data.list
                })
              }
            })
          }
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    OnChange (val) {
      this.getPageData(val, 10, 1).then(res => {
        this.data6 = res.data.list
      })
    },
    getPageData (page, limit, isShow, search) {
      this.LoadingTable = true
      return new Promise((resolve, reject) => {
        QueryRole(page, limit, isShow, search).then(res => {
          resolve(res.data)
          this.LoadingTable = false
        })
      })
    }
  },
  created () {
    this.getPageData(1, 10, 1).then(res => {
      if (res.code === 0) {
        this.Total = res.data.count
        this.data6 = res.data.list
        if (res.data.count >= 10) {
          this.isShow = true
        }
      } else {
        this.$Message.error('数据错误')
      }
    })
  }
}
</script>
<style scope lang="scss">
</style>
